<template>
  <base-breadcrumb class="supplier">
    <searchData
      :search-data="searchArr"
      @search="search"
    />
    <a-card :bordered="false">
      <div class="table-operator">
        <div class="pub-table-action-btn pub-table-action-btn-1">
          <a-button
            v-btnPermission="'crm_008_add_01'"
            type="primary"
            @click="handleEdit(null, 1)"
          >
            新增
          </a-button>
          <a-button
            v-btnPermission="'crm_008_inv_02'"
            type="primary"
            @click="handleCheckUser"
          >
            邀请评价
          </a-button>
        </div>
      </div>
      <list-table
        ref="table"
        :loading="loading"
        :columns="columns"  :request="loadData"  row-key="id"
        :export-config="{ use: true, select: '供应商品牌库', all: '供应商品牌库',customColumns: columns}"
        @select-click="(e) => (selectedRow = e.rows)"
      >
        <template
          slot="status"
          slot-scope="text, record"
        >
          <list-status
            :color="{ 0: 'yellow', 1: 'blue', 2: 'green' }[record.status]"
            conversion="en"
            :text="text"
          />
        </template>
        <div
          slot="operation"
          slot-scope="text, record"
        >
          <MoreButton>
            <a
              v-btnPermission="'crm_008_loo_03'"
              @click="handleEdit(record, 3)"
            >查看</a>
            <a
              v-if="record.status == 0"
              v-btnPermission="'crm_008_edi_04'"
              @click="() => handleEdit(record, 2)"
            >编辑</a>
          </MoreButton>
        </div>
      </list-table>
    </a-card>

    <a-modal
      v-if="checkShow"
      title="邀请评价"
      :visible="checkShow"
      width="60%"
      @cancel="clearUser"
    >
      <a-form-model
        ref="RuleForm"
        :model="formData"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :rules="rules"
      >
        <a-row>
          <a-col span="12">
            <a-form-model-item
              label="选择邀请评价人（业主）"
              prop="ownerId"
            >
              <a-select
                v-model="formData.ownerId"
                :loading="ownerLoad"
                placeholder="请选择"
              >
                <a-select-option
                  v-for="item in ownerData"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col span="24">
            <a-form-model-item extra="提示:如果没有业主，请到工程/工程项目管理/业主登录信息中进行设置" />
          </a-col>
        </a-row>
      </a-form-model>

      <template slot="footer">
        <a-button @click="clearUser">
          取消
        </a-button>
        <a-button
          :loading="bindLoading"
          type="primary"
          @click="submitUser"
        >
          提交
        </a-button>
      </template>
    </a-modal>
  </base-breadcrumb>
</template>
<script>


// import { getComplaintList, customerComplaintCancel, queryComplaintTree } from '@/api/complaint'
import { getOwnerInfoList, invitationAppraise, queryOwnerInfo, getPageCustomerSupplierBrand, comfirmSurvey } from '@/api/complaint/satisfactionsurvey.js'
import listStatus from '@/components/list_status/list_status'
import SelectProject from '@/components/Select/SelectProject' // 项目名称
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import OrgTreeSelect from '@/components/OrgTreeSelect'
export default {
  name: 'a' + Date.now(),
  computed: {
    rowSelection () {
      return {
        getCheckboxProps: record => ({
          props: {
            disabled: record.status != '0',
            name: record.name,
          },
        }),
      };
    },
  },
  data: function () {
    return {
      selectedRowData: [],
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      ownerData: [],
      loading: false,
      bindLoading: false,
      ownerLoad: false,
      infoShow: false,
      checkShow: false,
      pathName: this.$route.path,
      queryParam: {},
      infoQueryParam: {},
      pageNo: 1,
      pageSize: 10,
      totalSize: 0,
      selectedRow: [],
      searchArr: [
      {
        name: '所属单位',
        valueKey: 'searchQuery',
        type: OrgTreeSelect,
      },
        // {
        //   name: '所属分公司',
        //   valueKey: 'branchComId',
        //   type: SelectSubCompany
        // },
        // {
        //   name: '项目名称',
        //   type: SelectProject,
        //   keyValue: 'branchComId',
        //   valueKey: 'projectId'
        // },
        {
          name: '编号',
          value: 'code',
          type: 'input'
        },
        {
          name: '甲方名称',
          value: 'name',
          type: 'input'
        },
        {
          name: '项目业态',
          value: 'formats',
          type: 'input'
        },
        {
          name: '材料种类',
          value: 'material',
          type: 'input'
        },
        {
          name: '甲方规定备选品牌',
          value: 'spareBrand',
          type: 'input'
        },
        {
          name: '创建人',
          value: 'createUserName',
          type: 'input'
        },
        {
          name: '创建时间',
          value: 'createTime',
          type: 'dateRange',
          attr: {
            rangeFormat: ['startTime', 'endTime']
          }
        },
      ],
      columns: [
        {
          title: '编号',
          dataIndex: 'code',
          width: 160
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          width: 220
        },
        {
          title: '项目业态',
          dataIndex: 'formats',
          width: 160
        },

        {
          title: '甲方名称',
          dataIndex: 'name',
          width: 160
        },
        {
          title: '材料种类',
          dataIndex: 'material',
          width: 160
        },
        {
          title: '甲方规定备选品牌',
          width: 160,
          dataIndex: 'spareBrand',
        },
        {
          title: '创建人',
          width: 160,
          dataIndex: 'createUserName',
        },
        {
          title: '创建时间',
          width: 160,
          dataIndex: 'createTime',
        },
        {
          title: '状态',
          width: 160,
          dataIndex: 'statusName',
          scopedSlots: { customRender: 'status' }

        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 200,
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      selectId: [],
      selectedRows: [],
      chooseData: 0,
      tableData: [],
      projectData: [],
      formData: {
        ownerId: '',
        projectId: '',
        branchComId: '',
      },
      rules: {
        projectId: { required: true, message: '请选择项目名称', trigger: 'change' },
        branchComId: { required: true, message: '请选择所属分公司', trigger: 'change' },
        ownerId: { required: true, message: '请选择调查业主', trigger: 'change' },
      },
      loadData: (parameter) => {
          let that = this
          parameter.pageNum = parameter.pageNo;
          delete parameter.pageNo;
          this.loading = true;
          const requestParameters = Object.assign({}, parameter, { param: that.queryParam })
          return getPageCustomerSupplierBrand(requestParameters).then((res) => {
          let list = res.data?.list;
          list.length && list.map((item)=>{
             if(item.status != '0'){
                item.disabled = true;
             }
          })
          this.loading = false;
          return { code: 200, data: list, totalSize: res.data?.total }
          })
        },
    }
  },
  components: {
    listStatus
  },
  created () {
  },
  mounted: function () {
    this.$bus.$on('handleRefresh' + this.pathName, () => {
      this.list()
    })
  },
  beforeDestroy () {
    this.$bus.$off('handleRefresh' + this.pathName)
  },
  methods: {
    handlePush () {
      if (this.selectedRow.length == 0) {
        this.$message.error('请选择数据!')
      } else {
      }
    },
    clearUser () {
      this.checkShow = false
      this.formData = {
        "ownerId": '',
        "idList": null
      }

      // this.$refs.table && this.$refs.table.refresh(true)

    },
    submitUser () {
     let idList = []
      idList = this.selectedRow.map((item=>item.id)) || []
      this.$refs.RuleForm.validate(valid => {
        if (valid) {
          const data = {
            "ownerId": this.formData.ownerId,
            "idList": idList
          }
          this.bindLoading = true
          invitationAppraise(data).then(res => {
            if (res.data.code == 200) {
              this.checkShow = false
              this.$message.success('操作成功!')
              this.selectedRow = []
              this.list()


              this.formData = {
                "ownerId": '',
                "idList": null
              }
            }
            this.bindLoading = false
          }).catch(err => {
            this.bindLoading = false
          })
        }
      })
    },
    handleCheckUser () {
      if (this.selectedRow.length == 0) {
        this.$message.error('请选择数据!')
      } else {
        const data = this.selectedRow.filter(item => item.projectId != this.selectedRow[0].projectId)
        if (data.length != 0) {
          this.$message.error('请选择同一个项目!')
        } else {
          this.ownerLoad = true
          getOwnerInfoList(this.selectedRow[0].projectId).then(res => {
            this.ownerData = res.data
            if (res.data[0]) {
              this.formData.ownerId = res.data[0].id
            }
            this.ownerLoad = false
          })
          this.checkShow = true
        }
      }
    },
    list (params, callback) {
      this.$refs.table.refresh()
    },
    search(val) {
      this.queryParam = { ...val }
      this.$refs.table.refresh()
    },
    handleEdit (record, state) {
      this.infoShow = false
      this.$router.push({
        name: 'AddSupplier',
        query: {
          id: record && record.id || '',
          state: state
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
// /deep/.ant-modal {
//   width: 900px !important;
// }
.searchTable {
  .form_flex {
    display: flex;
    justify-content: space-between;
  }
}
.supplier{
    @{deep} .pub-table-action-btn{
    display: none;
  }
   @{deep} .pub-table-action-btn-1{
    display: inline-block;
  }
}
</style>
